@charset "utf-8";
body{
	margin:0px;
	padding:0px;
	/*background: #ADD8E6;*/
}
.cs-text {
	position: relative;
	width: 960px;
	height: 100px;
	margin: 180px auto;
	cursor: default;
}

.cs-text > span {
	-webkit-perspective: 200px;
	-moz-perspective: 200px;
	-o-perspective: 200px;
	-ms-perspective: 200px;
	perspective: 200px;
	float: left;
	position: relative;
}

.cs-text > span:first-child,
.cs-text > span:last-child {
	z-index: 1;
}

.cs-text > span:nth-child(2),
.cs-text > span:nth-child(7){
	z-index: 2;
}

.cs-text > span:nth-child(3),
.cs-text > span:nth-child(6){
	z-index: 3;
}

.cs-text > span:nth-child(4) {
	z-index: 5;
}

.cs-text > span:nth-child(5){
	z-index: 4;
}

.cs-text span span {
	display: block;
	background: #00b7ea;
	box-shadow: 
		-1px 0 2px rgba(255,255,255,0.4),
		-2px 0 0 #00adda, 
		-2px 7px 9px rgba(0, 0, 0, 0.5);
	color: #fff;
	text-shadow: -1px -1px 2px rgba(0,0,0,0.6);
	width: 120px;
	height: 150px;
	line-height: 150px;
	font-weight: 700;
	font-size: 90px;
	text-align: center;
	text-transform: uppercase;
}
.cs-text > span:nth-child(n+5) span {
	background: #009ec3;
	box-shadow: 
		1px 0 2px rgba(255,255,255,0.4),
		2px 0 0 #00adda, 
		-2px 7px 9px rgba(0, 0, 0, 0.5);
	text-shadow: 1px 1px 2px rgba(0,0,0,0.6);
}
.cs-text > span:nth-child(4) span{
	-webkit-transform: translateZ(40px) rotateY(40deg);
	-moz-transform: translateZ(40px) rotateY(40deg);
	-o-transform: translateZ(40px) rotateY(40deg);
	-ms-transform: translateZ(40px) rotateY(40deg);
	transform: translateZ(40px) rotateY(40deg);
}
.cs-text > span:nth-child(5) span{
	-webkit-transform: translateZ(40px) rotateY(-40deg);
	-moz-transform: translateZ(40px) rotateY(-40deg);
	-o-transform: translateZ(40px) rotateY(-40deg);
	-ms-transform: translateZ(40px) rotateY(-40deg);
	transform: translateZ(40px) rotateY(-40deg);
}
.cs-text > span:nth-child(3) span{
	-webkit-transform: translateZ(30px) rotateY(30deg);
	-moz-transform: translateZ(30px) rotateY(30deg);
	-o-transform: translateZ(30px) rotateY(30deg);
	-ms-transform: translateZ(30px) rotateY(30deg);
	transform: translateZ(30px) rotateY(30deg);
}
.cs-text > span:nth-child(6) span{
	-webkit-transform: translateZ(30px) rotateY(-30deg);
	-moz-transform: translateZ(30px) rotateY(-30deg);
	-o-transform: translateZ(30px) rotateY(-30deg);
	-ms-transform: translateZ(30px) rotateY(-30deg);
	transform: translateZ(30px) rotateY(-30deg);
}
.cs-text > span:nth-child(2) span{
	-webkit-transform: translateZ(20px) rotateY(20deg);
	-moz-transform: translateZ(20px) rotateY(20deg);
	-o-transform: translateZ(20px) rotateY(20deg);
	-ms-transform: translateZ(20px) rotateY(20deg);
	transform: translateZ(20px) rotateY(20deg);
}
.cs-text > span:nth-child(7) span{
	-webkit-transform: translateZ(20px) rotateY(-20deg);
	-moz-transform: translateZ(20px) rotateY(-20deg);
	-o-transform: translateZ(20px) rotateY(-20deg);
	-ms-transform: translateZ(20px) rotateY(-20deg);
	transform: translateZ(20px) rotateY(-20deg);
}
.cs-text > span:first-child span{
	-webkit-transform: translateZ(10px) rotateY(10deg);
	-moz-transform: translateZ(10px) rotateY(10deg);
	-o-transform: translateZ(10px) rotateY(10deg);
	-ms-transform: translateZ(10px) rotateY(10deg);
	transform: translateZ(10px) rotateY(10deg);
}
.cs-text > span:last-child span{
	-webkit-transform: translateZ(10px) rotateY(-10deg);
	-moz-transform: translateZ(10px) rotateY(-10deg);
	-o-transform: translateZ(10px) rotateY(-10deg);
	-ms-transform: translateZ(10px) rotateY(-10deg);
	transform: translateZ(10px) rotateY(-10deg);
}
.cs-text > span:nth-child(-n+4) {
	-webkit-transform: translateX(14px);
	-moz-transform: translateX(14px);
	-o-transform: translateX(14px);
	-ms-transform: translateX(14px);
	transform: translateX(14px);
}
.cs-text > span:nth-child(n+5) {
	-webkit-transform: translateX(-14px);
	-moz-transform: translateX(-14px);
	-o-transform: translateX(-14px);
	-ms-transform: translateX(-14px);
	transform: translateX(-14px);
}
